<template>
  <div class="dataDisplayContainer">
    <div class="dataDisplayLeft">
      <div class="top">
        <div class="cell">
          <img src="@/assets/dataDisplay/1.png" alt="">
          <div style="display: flex;align-items: flex-start;flex-direction: column;">
            <div>{{currentData.total_students}} {{t('common', '人')}}</div>
            <div>{{ t('dataDisplay', '共参与人数') }}</div>
          </div>
        </div>
        <div class="cell">
          <img src="@/assets/dataDisplay/2.png" alt="">
          <div style="display: flex;align-items: flex-start;flex-direction: column;">
            <div>{{currentData.total_students}} {{t('common', '人')}}</div>
            <div>{{ t('dataDisplay', '正在学习中') }}</div>
          </div>
        </div>
        <div class="cell">
          <img src="@/assets/dataDisplay/3.png" alt="">
          <div style="display: flex;align-items: flex-start;flex-direction: column;">
            <div>{{currentData.completed_students}} {{t('common', '人')}}</div>
            <div>{{ t('dataDisplay', '已完成人数') }}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="progressBox">
          <div class="subTitle">
            <div class="subTitleLeft">{{ t('dataDisplay', '学习进度分布') }}</div>
            <div class="subTitleRight">
              <div >{{ t('dataDisplay', '已完成') }} {{ formatPercent(currentData.completed_students, currentData.total_students) }}%</div>
              <div>{{ t('dataDisplay', '未完成') }} {{ formatPercent(currentData.in_progress_students, currentData.total_students) }}%</div>
            </div>
          </div>
            <a-progress style="height: 100%;" :size="243" :percent="formatPercent(currentData.completed_students, currentData.total_students)" type="dashboard">
            <template #format="percent">
              <div style="display: flex; flex-direction: column">
                <span style="color: #878692; font-size: 16px">{{ t('dataDisplay', '总完成人数') }}</span>
                <span style="color: #333; font-size: 22px; margin-top: 10px">{{currentData.completed_students}}{{t('projectPositions','人')}}</span>
              </div>
            </template>
          </a-progress>
          
        </div>
        <div class="chartBox">
          <div class="subTitle">
            <div class="subTitleLeft">{{ t('dataDisplay', '学习进度分布') }}</div>
          </div>
          <div class="chart" id="barChart"></div>
        </div>
      </div>
    </div>
    <!-- <div class="dataDisplayRight"></div> -->

    <a-drawer
			title=""
			width="35%"
			placement="right"
			:closable="false"
			v-model:open="drawer.visible"
		>
    <div class="drawerBox">
      <div class="info">{{drawer.info.name}}</div>
      <div class="list">
        <div class="item" v-for="item in drawer.list">
          <div class="name">{{item.studentName}}</div>
          <div class="course">{{item.gradeName}} {{ item.gradeClassName }}</div>
          <div class="progress">{{item.completeness}}%</div>
        </div>
      </div>
      <a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
    </div>
    </a-drawer>
  </div>
</template>
<script setup>
import { reactive, onMounted, inject, ref, nextTick } from 'vue'
import * as echarts from 'echarts'
import { studentCountStatistics, completionRateDistribution, learningTaskCompletionRateStudent } from '@/request/learn/dataDisplay'
import { t } from '@/i18n'

let pojectInfo = JSON.parse(sessionStorage.getItem('pojectInfo') || '{}')


const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const currentData = ref({})
const drawer = reactive({ visible: false, info: {}, list: [] })
const show = async () => {
  let group = drawer.info.name.replace('%', '').split('-')
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
    min: group[0],
    max: group[1],
    id: pojectInfo.id
	}
	let res = {
		列表: await learningTaskCompletionRateStudent(req),
  }
	if (res['列表']) {
		drawer.list = res['列表'].data.content
		pagination.value = {
			...pagination.value,
			...res['列表'].data.page
		}
	}
}
const firstInit = () => {
  const barChart = echarts.init(document.getElementById('barChart'))
  barChart.setOption({
    grid: {
      top: '0%',
      right: '2%',
      left: '0%',
      bottom: '2%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [1, currentData?.value?.range_81_100  || 0, '81-100%'],
        [2, currentData?.value?.range_61_80  || 0, '61-80%'],
        [3, currentData?.value?.range_41_60 || 0, '41-60%'],
        [4, currentData?.value?.range_21_40 || 0, '21-40%'],
        [5, currentData?.value?.range_0_20 || 0, '0-20%'],
      ],
    },
    xAxis: {
      // name: 'amount',
      // show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
      // axisTick:{
      //   show:false // 不显示坐标轴刻度线
      // },
      // axisLine: {
      //   show: false, // 不显示坐标轴线
      // },
      // axisLabel: {
      //   show: false, // 不显示坐标轴上的文字
      // },
      splitLine: {
        show: false, // 不显示网格线
      },
    },
    yAxis: {
      type: 'category',
      axisLine: {
        show: false,
      },
      // 	axisLine: {
      //   show: false  // 隐藏 Y 轴线
      // },
      axisTick: {
        show: false, // 隐藏 Y 轴刻度
      },
    },
    visualMap: {
      show: false,
      orient: 'horizontal',
      left: 'center',
      min: 1,
      max: 5,
      // text: ['High Score', 'Low Score'],
      // Map the score column to color
      dimension: 0,
      inRange: {
        // 5B93FF
        color: ['#efe1ec', '#bcccfa', '#1264f9', '#debffa', '#8f29f9'],
      },
    },
    series: [
      {
        type: 'bar',
        encode: {
          x: 'amount',
          y: 'product',
        },
      },
    ],
  })
  barChart.on('click', function (params) {
    pagination.value.current = 1
    drawer.info = params
    show()
    drawer.visible = true
  })
}
const firstShow = async () => {
  let res = {
    人数: await studentCountStatistics(pojectInfo?.id),
    统计: await completionRateDistribution(pojectInfo?.id),
  }
  if (res['人数']||res['统计']) {
    currentData.value = {
      ...res['人数'].data,
      ...res['统计'].data,
    }
  }
  console.log(currentData.value, '11111')
}
(async () => {
  await firstShow()
  firstInit()
})()

const formatPercent = (val = 0, totalVal = 0) => {
  if (totalVal === 0) return 0
  return +((((val / totalVal).toFixed(2)) * 100).toFixed(2))
}

const handleClick = async ({ name, record }) => {
	let req = {}, res = null
	switch (name) {
		case '查看':
			break
	}
}
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

.dataDisplayContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .dataDisplayLeft {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .cell {
        border-radius: 10px;

        padding: 20px;
        width: 30%;
height: 124px;
background: #FFFFFF;
border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 63px;
          height: 63px;
          margin-right: 26px;

        }
       

        & :last-child {
          & :first-child {
            font-size: 26px;
            color: #412C4B;
        }
        & :last-child {
          margin-top: 3px;
          font-weight: 600;
          font-size: 14px;
          color: #8D8C9D;
        }
        }
      }
    }

    .bottom {
      margin-top: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .progressBox {
        border-radius: 10px;
        overflow-y: auto;
        background: white;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
      }

      .chartBox {
        border-radius: 10px;
        margin-top: 20px;
        background: white;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 30px;

        .chart {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
      }

      .subTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .subTitleLeft {
          font-size: 16px;
          font-weight: 500;
        }

        .subTitleRight {
          display: flex;
color: #333333;
font-size: 14px;
          div {
            margin-left: 10px;
            &:first-child {
              position: relative;
              &::after {
                content: '';
                position: absolute;
                left: -20px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #006cf9;
              }
            }
            &:last-child {
              position: relative;
              margin-left: 40px;
              &::after {
                content: '';
                position: absolute;
                left: -20px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #f0f0f0;
              }
            }
          }
        }
      }
    }
  }

  .dataDisplayRight {
    border-radius: 10px;
    margin-left: 20px;
    height: 100%;
    width: 35%;
    background: #f5f5f5;
  }
  
}
.drawerBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  .info {
    font-size: 18px;
  }
  .list {
    flex-grow: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      background: #f5f5f5;
      padding: 20px;
      .name {
        font-weight: 500;
      }
      .progress {
        color: #1264f9;
      }
    }
  }
}
</style>
